<template>
	<view class="tabTop">
		<scroll-view class="tab-bar" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true">
			<view class="box" :style="{ 'width': totalWidth + 'px' }">
				<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { 'active': activeTab === index }]"
					@tap="changeTab(index)">
					{{ tab.name }}
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getIrriAreaList
	} from '../../api/index.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['areaObject', 'curAreaNum'])
		},
		data() {
			return {
				itemWidth: 0, //每个item的宽度
				totalWidth: 100, //设置一个默认总宽度
				scrollLeft: 0, //滑动距离
				tabs: [],
				activeTab: this.$store.state.curAreaNum, // 当前选中的标签页
			};
		},
		mounted() {
			this.getArea()
			// this.$store.commit('updateAreaNum', this.$store.state.curAreaNum);
			// this.activeTab = this.$store.state.curAreaNum,
		},
		onLoad() {
			/*
			  计算总宽度和每个item的宽度
			  item宽度 = 自身宽度 + 8px右边距
			  总宽度 = item个数 * 每个item的宽度
			*/
			this.$nextTick(() => {
				let dom = uni.createSelectorQuery().select(".tabTopItem");
				dom.boundingClientRect((data) => {
					let num = this.tabTopList.length;
					this.itemWidth = data.width + 8;
					this.totalWidth = num * this.itemWidth;
				}).exec()
			})
		},
		methods: {
			getArea() {
				getIrriAreaList({
						limit: 100,
						page: 1
					})
					.then(res => {
						console.log(res)
						if (res.code == 200) {
							this.tabs = res.data.data
							if (res.data.data.length > 0) {
								if (this.$store.state.curAreaNum == 0) {
									// this.$emit('bindArea', res.data.data[0])
									this.$store.commit('updateMyObject', res.data.data[0]);
									this.$store.commit('updateAreaNum', 0);
								} else {
									// this.$emit('bindArea', res.data.data[this.$store.state.curAreaNum])
									this.$store.commit('updateMyObject', res.data.data[this.$store.state.curAreaNum]);
									this.$store.commit('updateAreaNum', this.$store.state.curAreaNum);
								}

							}

						}
					})
			},
			changeTab(index) {
				this.activeTab = index; // 切换标签页，自动更新设备数据
				const newObject = this.tabs[index]
				this.$store.commit('updateMyObject', newObject);
				this.$store.commit('updateAreaNum', index);
				// console.log(this.$store)
				// this.$emit('change', this.tabs[index])
				this.scrollLeft = this.itemWidth * (index - 1);
			},
		},
	};
</script>

<style scoped lang="scss">
	/* 标签页样式 */
	.tab-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 10px;

	}

	.tab-item {
		height: 32px;
		line-height: 32px;
		text-align: center;
		width: auto;
		padding: 0 15px;
		font-size: 14px;
		margin-right: 15px;
		color: #333;
		background-color: #f5f5f5;
		border: 1px solid #f1f1f1;
		/* 默认背景色 */
		border-radius: 4px;
		flex-shrink: 0;
		/* 禁止收缩，确保每个tab项宽度不会被压缩 */
	}

	.tab-item.active {
		background: rgba(28, 71, 226, 0.12);
		color: #1C47E2;
		/* 选中时文字颜色 */

	}

	/* 在这里添加样式 */

	.tabTop {
		width: 100%;
		height: 90rpx;
		margin: auto;
		display: flex;
		align-items: center;
		position: fixed;
		// top: 46px;
		width: 100%;
		z-index: 99;
		background-color: #fff;

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.box {
			display: flex;
			align-items: center;

			.tabTopItem {
				text-align: center;
				width: 168rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #F6F7FB;
				font-size: 28rpx;
				color: #8D9199;
				margin-right: 8px;
				position: relative;
			}
		}
	}
</style>